<template>
	<view class="zhongyizhil">
		<headertop title="中医治疗" str="orderlist" :back1="back1"></headertop>
		<!-- 	<view class="zhongyizhilback">
		</view>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view> -->
		<image :src="_static('/images/Group 11691@2x.png')" class="imge2" mode="widthFix"></image>
		<!-- 	<view class="listcontent">
			<view class="itemcontent" v-for="item in  5">
				<image :src="_static('/images/Group 11686@2x.png')" class="imgbox" mode=""></image>
				<view class="texts">
					<view class="t1">
						这是中医治疗项目
					</view>
					<view class="zhouqiline">
						<view class="zqbox">
							3周期
						</view>
						<view class="tt">
							待治疗：2周期
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script setup>
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	const statusBarHeight = ref('')
	const barHeight = ref('')
	const back1 = ref('')
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}
	})
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
	}

	.imge2 {
		width: 100%;
	}

	.zhongyizhil {
		width: 100%;
		overflow: hidden;
		position: relative;

		.zhongyizhilback {
			width: 100%;
			height: 450rpx;
			position: absolute;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			z-index: -1;
		}

		.listcontent {
			width: 686rpx;
			margin: auto;
			margin-top: 32rpx;
			overflow: hidden;

			.itemcontent {
				width: 100%;
				display: flex;
				align-items: center;
				height: 144rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(0, 0, 0, 0.06);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-bottom: 28rpx;

				.imgbox {
					width: 88rpx;
					height: 88rpx;
					margin-left: 28rpx;
				}

				.texts {
					margin-left: 16rpx;
					width: 520rpx;
					overflow: hidden;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						white-space: nowrap; // 防止文本换行
						overflow: hidden; // 隐藏溢出的文本
						text-overflow: ellipsis; // 显示省略号
						color: #1D2129;
					}

					.zhouqiline {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 20rpx;

						.tt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #4E5969;
						}

						.zqbox {
							width: 96rpx;
							height: 40rpx;
							background: #E8F3FF;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							text-align: center;
							line-height: 40rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #2AB4F5;
						}
					}
				}
			}
		}
	}
</style>